<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>凭证列表</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="凭证列表">
  <meta name="description" content="凭证列表">
  <meta name="author" content="yinqi">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
</head>

<style>
  .div1 {
    margin: 10px auto;
    top: 70px;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 200px;
    margin-bottom: 10px;
  }

  .col-lg-12 {
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 1000px;
    height: 500px;
    background-color: white;
  }
</style>

<body>
  <div class="lyear-layout-web" id="app">
    <div class="div1">
      <h1>凭证列表</h1>
    </div>
    <div class="col-lg-12">
      <div class="card-toolbar clearfix">
      <form class="pull-right search-bar" method="get" action="#!" role="form">
        <div class="input-group">
          <div class="input-group-btn">
            <input type="hidden" name="search_field" id="search-field" value="title">
            <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
              科目名称 <span class="caret"></span>
            </button>
          </div>
          <input type="text" class="form-control" v-model="credentialsLog.km" v-on:keyup="getlist(1)" name="keyword" placeholder="请输入科目名称">
        </div>
      </form>
       <div class="toolbar-btn-action">
        <!-- <a class="btn btn-primary m-r-5" data-toggle="modal"    ><i class="mdi mdi-plus" ></i> 批量删除</a> -->
        <el-button  class="btn btn-danger" type="warning" style="background-color:#f96868;" @click="removeBatch(sels)" :disabled="this.sels.length === 0||this.disabled"><i class="mdi mdi-window-close"></i>批量删除</el-button>
      </div>
    </div>
      <template>
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          :data="list"
          style="width: 100%" @selection-change="selsChange">
          <el-table-column  type="selection" width="65"></el-table-column>
          <el-table-column
            prop="jzAbstract"
            label="摘要"
            width="180">
              <template slot-scope="scope">
              <span>{{scope.row.jzAbstract}}</span></br>
              <span>{{scope.row.jzAbstract2}}</span></br>
              <span>合计</span>
           </template>
          </el-table-column>
          <el-table-column
            prop="jzKmId"
            label="会计科目"
            width="180">
            <template slot-scope="scope">
              <span>{{scope.row.km}}</span></br>
              <span>{{scope.row.km2}}</span></br>
              <span>{{scope.row.convert}}</span>
           </template>
          </el-table-column>
          <el-table-column
            prop="jzJfprice"
            label="借方金额"
            width="180">
            <template slot-scope="scope">
              <span>{{scope.row.jzJfprice}}</span></br>
              <span>{{scope.row.jzJfprice2}}</span></br>
              <span>{{scope.row.jfsum}}</span>
           </template>
          </el-table-column>
          <el-table-column
            prop="jzDfprice"
            label="贷方金额">
            <template slot-scope="scope">
              <span>{{scope.row.jzDfprice}}</span></br>
              <span>{{scope.row.jzDfprice2}}</span></br>
              <span>{{scope.row.dfsum}}</span>
           </template>
          </el-table-column>
    <el-table-column label="操作" align="center" min-width="100">
　　　　<template slot-scope="scope">
            <div class="btn-group">
              <a class="btn btn-xs btn-default" @click="edit(scope.row.jzId,scope.row.jzId2)"  type="button" data-toggle="modal" data-target="#myModalup" title="编辑" data-toggle="tooltip">编辑</a>
              <a class="btn btn-xs btn-default" @click="del(scope.row.jzId,scope.row.jzId2)" type="button"  title="删除" data-toggle="tooltip">删除</a>
            </div>
　　　　</template>
　　</el-table-column>
        </el-table>
        
      </template>
      <nav>
        <ul class="pagination pagination-circle">
          <li class="active"><a>{{totals}}</a></li>
          <li>
            <a type="button" @click="getlist(prePage)">
              <span><i class="mdi mdi-chevron-left" ></i></span>
            </a>
          </li>
          <li ><a>{{currentPage}}</a></li>
          <li>
            <a type="button" @click="getlist(nextPage)">
              <span><i class="mdi mdi-chevron-right"></i></span>
            </a>
          </li>
        </ul>
      </nav>  
    </div>
    <form action=""  class="form-horizontal" role="form">
      <div class="modal fade" id="myModalup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content" style="width: 1000px;
              margin-left: -185px; height: 697px;">
                  <div class="modal-header">
                      <h4 class="modal-title" id="myModalLabel">
                        记账凭据
                      </h4>
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                          &times;
                      </button>
                  </div>
                  <div class="modal-body" style="height: 79%; float: left; width: 1000px;">
                    <div class="col-lg-12">
                      <!-- <el-button type="success" @click="insert()">保存</el-button><br> -->
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" @click="update()"  data-dismiss="modal" style="float: left;">保存</button>
                        <button type="button" class="btn btn-default" @click="editdel()"  data-dismiss="modal" style="float: left;">删除</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" style="float: left;">返回</button>
                    </div>
                      <template>
                        <el-select v-model="credentialsLog.jzProof" placeholder="请选择" style="width: 80px;">
                          <el-option v-for="item in proofList" :key="item.pProof" :label="item.pProof" :value="item.pProof">
                          </el-option>
                        </el-select>
                      </template>
                      <el-input style="width: 100px;" v-model="credentialsLog.jzH" placeholder="请输入内容"></el-input><span
                        style="font-size: 18px;"> 号</span>
                      <el-date-picker v-model="credentialsLog.jzDate" type="date" placeholder="选择日期">
                      </el-date-picker>
                      <div class="div2" style="height: 400px;">
                        <div class="div3" style="height: 80px;">
                          <div style="width: 242px;height: 80px;float: left;border:1px solid #ccc">
                            <div style="text-align: center;margin-top: 25px;font-size: 20px;">摘要</div>
                          </div>
                          <div style="width: 242px;height: 80px;float: left;border:1px solid #ccc;border-left: none;">
                            <div style="text-align: center;margin-top: 25px;font-size: 20px;">会计科目</div>
                          </div>
                          <div style="width: 243px;height: 80px;float: left;border:1px solid #ccc;border-left: none;">
                            <div style="text-align: center;margin-top: 25px;font-size: 20px;">借方金额</div>
                          </div>
                          <div style="width: 243px;height: 80px;float: left;border:1px solid #ccc;border-left: none;">
                            <div style="text-align: center;margin-top: 25px;font-size: 20px;">贷方金额</div>
                          </div>
                        </div>
                        <div class="div3" style="height: 60px;">
                          <!-- 11111111111-->
                          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
                            <select style="width: 240px;height: 58px;border: 0px ;"  v-model="credentials2.jzAbstract" id="z1">
                              <option value=""></option>
                              <option value="提现">提现</option>
                              <option value="支付银行手续费">支付银行手续费</option>
                              <option value="利息收入">利息收入</option>
                              <option value="报销销售人员的业务招待费">报销销售人员的业务招待费</option>
                              <option value="购入固定资产">购入固定资产</option>
                              <option value="支付货款">支付货款</option>
                            </select>
                          </div>
                          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <select style="width: 240px;height: 58px;border: 0px ;" v-model="credentials2.jzKmId" id="k1">
                              <option value=""></option>
                              <option :value="item.kmCoding" v-for="(item,index) in subjectsList">{{item.kmName}}</option>
                            </select>
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="a1" v-model="credentials2.jzJfprice" @change="pd()">
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="a2" v-model="credentials2.jzDfprice"
                              @change="pd1()">
                          </div>
                        </div>
                        <div class="div3" style="height: 60px;">
                          <!-- 22222222222 -->
                          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
                            <select style="width: 240px;height: 58px;border: 0px ;" id="z2" v-model="credentials2.jzAbstract2">
                              <option value="" ></option>
                              <option value="提现">提现</option>
                              <option value="支付银行手续费">支付银行手续费</option>
                              <option value="利息收入">利息收入</option>
                              <option value="报销销售人员的业务招待费">报销销售人员的业务招待费</option>
                              <option value="购入固定资产">购入固定资产</option>
                              <option value="支付货款">支付货款</option>
                            </select>
                          </div>
                          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <select style="width: 240px;height: 58px;border: 0px ;" v-model="credentials2.jzKmId" id="k2">
                              <option value="" ></option>
                              <option :value="item.kmCoding" v-for="(item,index) in subjectsList">{{item.kmName}}</option>
                            </select>
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" v-model="credentials2.jzJfprice2" type="text" id="b1"
                              @change="pd2()">
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" v-model="credentials2.jzDfprice2" type="text" id="b2"
                              @change="pd3()">
                          </div>
                        </div>
                        <div class="div3" style="height: 60px;">
                          <!-- 3333333333333 -->
                          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
                            <select style="width: 240px;height: 58px;border: 0px ;" id="z3">
                              <option value=""></option>
                              <option value="提现">提现</option>
                              <option value="支付银行手续费">支付银行手续费</option>
                              <option value="利息收入">利息收入</option>
                              <option value="报销销售人员的业务招待费">报销销售人员的业务招待费</option>
                              <option value="购入固定资产">购入固定资产</option>
                              <option value="支付货款">支付货款</option>
                            </select>
                          </div>
                          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <select style="width: 240px;height: 58px;border: 0px ;" id="k3">
                              <option value=""></option>
                              <option :value="item.kmCoding" v-for="(item,index) in subjectsList">{{item.kmName}}</option>
                            </select>
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;"   type="text" id="c1"
                              @change="pd4()">
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;"  type="text" id="c2"
                              @change="pd5()">
                          </div>
                        </div>
                        <div class="div3" style="height: 60px;">
                          <!-- 44444444444 -->
                          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
                            <select style="width: 240px;height: 58px;border: 0px ;" id="z4">
                              <option value=""></option>
                              <option value="提现">提现</option>
                              <option value="支付银行手续费">支付银行手续费</option>
                              <option value="利息收入">利息收入</option>
                              <option value="报销销售人员的业务招待费">报销销售人员的业务招待费</option>
                              <option value="购入固定资产">购入固定资产</option>
                              <option value="支付货款">支付货款</option>
                            </select>
                          </div>
                          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <select style="width: 240px;height: 58px;border: 0px ;"  id="k4">
                              <option value=""></option>
                              <option :value="item.kmCoding" v-for="(item,index) in subjectsList">{{item.kmName}}</option>
                            </select>
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;"  type="text" id="d1"
                              @change="pd6()">
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;"   type="text" id="d2"
                              @change="pd7()">
                          </div>
                        </div>
                        <!-- 总计 -->
                        <div class="div3" style="height: 60px;">
                          <div style="width: 484px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
                              <div style="margin-top: 15px;margin-left: 10px;">
                                <span style="font-size: 20px;">合计:&nbsp;{{credentials2.convert}}</span>
                              </div>
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" v-model="credentials2.jfsum">
                          </div>
                          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
                            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" v-model="credentials2.dfsum">
                          </div>
                        </div>
                      </div>
                      <div style="margin-top: -10px;">
                        制单人: {{window.localStorage.getItem("username")}}
                      </div>
                    </div>
                 </div>
            
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                      <!-- <el-button id="button" data-dismiss="modal"  class="btn btn-default" type="primary" :loading="loading" @click="subjectsup()">提交</el-button> -->
                  </div>
              </div>
          </div>
      </div>
    </form>
  </div>
  </div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      list:[],
      currentPage:1, //当前页码
      size:4, 
      totals:"",
      prePage:1,
      nextPage:1,
      totalPage:1, //总页数

      sels: [],//选中显示的值
      selsadd: [],//选中显示的值
      selsup: [],//选中显示的值

      proofList: [],
      subjectsList: [],
      menu: [],
      loading: false,
      account: {},
      disabled: true,
      menuup: {},
      credentialsLog: {
        jzProof: "",
        jzH: "",
        jzDate: "",
      },
      credentials:{

      },
      credentials2:{

      },
      sum1: 0,
      sum2: 0,
      sum: "",
    },
    created() {
      this.getlist(1);
      this.getlist1() 
    },
    methods: {
      update(){
        axios.post("http://localhost:8888/CredentialsLog/update",this.credentials2)
        .then(res => {
          console.log(res)
          this.loading=true;
        setTimeout(() => {
        this.loading = false;

        this.$message({
        message: '恭喜你，凭证数据修改成功！！',
        type: 'success'
        });
      }, 2000);
      this.getlist(1);
        })
        .catch(err => {
          console.error(err); 
          this.$message.error('凭证数据修改失败！！！');
        })
      },
      getlist1() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          axios.get("http://localhost:8888/subjects/selectByExample")
            .then(res => {
              this.subjectsList = res.data
            })
            .catch(err => {
              console.error(err);
              
            })

        }, 1);
      },
      edit(id,id2){
        window.localStorage.setItem("id",id)
        window.localStorage.setItem("id2",id2)
        // alert(id)
        // alert(id2)
        axios.get("http://localhost:8888/CredentialsLog/selectById/"+id+"/"+id2)
        .then(res => {
          this.credentials2 = res.data
          console.log(res)
        })
        .catch(err => {
          console.error(err); 
        })
      },
      editdel(){
        this.id = window.localStorage.getItem("id")
        this.id2 = window.localStorage.getItem("id2")
        this.credentials.jzId = this.id;
        this.credentials.jzId2 = this.id2;
        this.$confirm('确定要删除凭证数据吗?','提示').then(() =>{
          axios.post("http://localhost:8888/CredentialsLog/delete",this.credentials)
        .then(res => {
          console.log(res)
          this.loading=true;
       setTimeout(() => {
        this.loading = false;

        this.$message({
        message: '恭喜你，凭证数据删除成功！！',
        type: 'success'
        });
      }, 2000);
      this.getlist(1);
        })
        .catch(err => {
          console.error(err); 
          this.$message.error('凭证数据删除失败！！！');
        })
      }).catch(()=>{}); 
      },
      selsChange(sels) {      
        //被选中的行组成数组 
        this.sels = sels;
        // alert(JSON.stringify(this.sels))
        //遍历被选中行数所组成的数组
        for(let element of this.sels){
        //如果视频正在转码或者等待转码,禁用按钮,结束方法
          if(element.status == 'waiting'||element.progress){
            this.disabled = true;
            return;
          }
             //如果没有视频正在转码或者等待转码,按钮可用
            this.disabled = false;
        }
    },
    removeBatch(rows){  //批量删除
      var ids = [];
      //alert(JSON.stringify(rows))
      rows.forEach(element =>{
        ids.push(element.jzId)
        ids.push(element.jzId2)
      })
      alert(ids)
      this.$confirm('确定要删除选中的文件吗?','提示').then(() =>{
        axios.get("http://localhost:8888/CredentialsLog/pldelete/"+ids)
        .then(res => {
          this.loading = true;
        setTimeout(() => {
          this.loading = false;

          this.$message({
          message: '恭喜你，批量删除成功',
          type: 'success'
           });

          }, 2000);

          this.getlist(1);
          console.log(res)
        })
        .catch(err => {
          console.error(err); 
        })
      }).catch(()=>{});
    },

      del(id,id2){
        this.credentials.jzId = id;
        this.credentials.jzId2 = id2;
        this.$confirm('确定要删除凭证数据吗?','提示').then(() =>{
          axios.post("http://localhost:8888/CredentialsLog/delete",this.credentials)
        .then(res => {
          console.log(res)
          this.loading=true;
       setTimeout(() => {
        this.loading = false;

        this.$message({
        message: '恭喜你，凭证数据删除成功！！',
        type: 'success'
        });
      }, 2000);
      this.getlist(1);
        })
        .catch(err => {
          console.error(err); 
          this.$message.error('凭证数据删除失败！！！');
        })
    
      }).catch(()=>{}); 
      },
      getlist(currentPage){
      this.loading=true;
      setTimeout(() => {
      this.loading = false;
      axios.post("http://localhost:8888/CredentialsLog/selectByAllPageSize/"+this.currentPage+"/"+this.size,this.credentialsLog)
      .then(res => {
        // this.list = res.data
        this.list = res.data.rows;
        this.totals = res.data.total;
        this.currentPage = currentPage;
        this.totalPage = Math.ceil(this.totals/this.size);
        this.prePage = currentPage>1?currentPage-1:currentPage;
        this.nextPage = currentPage<this.totalPage?currentPage+1:currentPage;
        console.log(res)
      })
      .catch(err => {
        console.error(err); 
      })

       }, 2000);
    },
    }
  })
  function number_chinese(str) {
    var num = parseFloat(str);
    var strOutput = "",
      strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分';
    num += "00";
    var intPos = num.indexOf('.');
    if (intPos >= 0) {
      num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
    }
    strUnit = strUnit.substr(strUnit.length - num.length);
    for (var i = 0; i < num.length; i++) {
      strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i, 1), 1) + strUnit.substr(i, 1);
    }
    return strOutput.replace(/零角零分$/, '整').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|万])/g, '$1').replace(/零+元/, '元').replace(/亿零{0,3}万/, '亿').replace(/^元/, "零元")
  }
</script>

</html>